<template>
  <div>
    <Top/>
    <div style="height: 0.46rem"></div>
    <div class="content">
      <div v-if="hotgames.id">
        <div class="pinch-zoom">
          <img :src="hotgames.picurl?hotgames.picurl[0]:require('../assets/img/noimg_bb2fc02.png') " alt="" />
        </div>
        
        <div class="money">￥<span>{{ hotgames.price }}</span></div>
        <!-- 图片挂载  互删 背景图 -->
        <div class="title-title-left"></div>
        <span class="title-title">{{ hotgames.name }}</span>
        <div class="come">卖家{{ hotgames.lastSellerOnline }}</div>
        <div class="come">发布于{{ hotgames.addtime }}</div>
      </div>

      <!-- 广告 -->
      <div class="business-footer">
        <img
          src="https://img2.taoshouyou.com/img/2020-12-12/31/e3092448b6b525e236810a8c872fc0cb.jpg"
        />
        <div id="public">超激情、高收益，打金与激情并存</div>
      </div>

      <!-- 商品详情  选项卡效果 -->
      <van-tabs v-model="activeName">
        <!-- 第一个选项卡，可以渲染数据 -->
        <van-tab title="商品信息" name="a">
          <!-- 商品信息 -->
          <div class="module pro_info">
            <div>
              <span class="gray pro_info_left">商品ID</span
              ><span class="pro_info_right">{{ hotgames.id }}</span>
            </div>
            <div>
              <span class="gray pro_info_left">客户端</span
              ><span class="pro_info_right">{{ hotgames.clientname }}</span>
            </div>
            <div>
              <span class="gray pro_info_left">服务器</span
              ><span class="pro_info_right">{{ hotgames.areaname }}</span>
            </div>
          </div>
          <!-- 卖家描述 这个拿不到数据，所以直接写死的-->
          <div class="seller-box">
            <div class="seller">卖家描述</div>
            <div class="gray pro_info seller-box1">
              <p class="account">账号亮点</p>
              <span class="seller-speak">
                影至尊，王者11把不算雷，还有很多英雄级，稀有黑龙魂，堕天使警换装，赛博背包，王者v8。
                跑跑卡丁车v7、吃鸡冲了也过千，好多游戏。自己看图。不议价
              </span>
            </div>
            <div class="gray pro_info seller-box1">
              <p class="account1">英雄武器</p>
              <span class="seller-speak"
                >王者之心,王者之魄,王者之魂,王者之锋,黑武士,火麒麟,毁灭,无影,雷神
              </span>
            </div>
            <div class="account2">
              <span class="gray pro_info_left">VIP等级</span
              ><span class="pro_info_right">9</span>
            </div>
            <div class="account2">
              <span class="gray pro_info_left">是否含有申诉记录</span
              ><span class="pro_info_right">否</span>
            </div>
            <div class="account2">
              <span class="gray pro_info_left">QQ等级</span
              ><span class="pro_info_right">79</span>
            </div>
          </div>
        </van-tab>
        <!-- 第二个选项卡，可以写死信息 -->
        <van-tab title="购买流程" name="b">
          <ul class="w-buysteps">
            <li class="w-buysteps-step1 w-buysteps-step">
              <p>议价验号</p>
              <p class="red">
                通过APP，与卖家商议价格及保险，并向卖家索要账号最新截图，确认后下单购买。
              </p>
            </li>
            <li class="w-buysteps-step2 w-buysteps-step">
              <p>客服介入换绑</p>
              <p>
                下单后，客服会最短时间与您取得联系，为买卖双方账号解绑换绑。
              </p>
            </li>
            <li class="w-buysteps-step3 w-buysteps-step">
              <p>买家收货</p>
              <p>
                换绑过户成功后，客服将账号资料发送给买家确认，无误后确认收货，交易完成。
              </p>
            </li>
            <li class="w-buysteps-step4 w-buysteps-step">
              <p>系统自动收货时间</p>
              <p>普通账号24小时自动确认收货，网易账号48小时，腾讯账号7天。</p>
            </li>
          </ul>
        </van-tab>
      </van-tabs>
    </div>

    <!-- 底部 -->
    <van-goods-action>
        <van-goods-action-button type="warning" text="加入收藏" @click="hand"/>
        <van-goods-action-button
            type="danger"
            text="联系卖家"
            @click="onClickButton"
            default="14725821245"
        />
    </van-goods-action>
  </div>
</template>

<script>
import { Toast } from "vant";
import qs from 'qs'
import Top from '../components/top.vue';
import {getGoods} from '../api/getGoods'
export default {
  data() {
    return {
      activeName: "a",
      hotgames: {},
      idx: 1,
      color:false,//控制已收藏的颜色
    };
  },
  methods: {
    onClickIcon() {
      Toast("点击图标");
    },
    onClickButton() {
      Toast("点击按钮");
    },
    hand(){
      if(this.mm){
        this.$store.commit('percen/insert',this.hotgames)
      }else{
        this.$router.push('/denlu')
        this.$store.commit('percen/insert',this.hotgames)
      }
      
    }
  },
  computed: {
    mm(){
      return this.$store.state.percen.is
    }
  },
  components: {
    Top
  },
  created() {
    let fromData=JSON.parse(sessionStorage.goodData)
    let data= qs.stringify(fromData)
    
    getGoods(data).then((val) => {
      var a = val.data.goodsList;
      let goodId=this.$route.params.m
      a.forEach(val => {
        if(val.id==goodId){
            this.hotgames = val;
        }
      })
    })
  },
};
</script>

<style lang="less" scoped>
@import url("../assets/css/productdetail.css");
.module {
  margin-top: 5px;
}
.title-title-left{
    margin-right: 20px;
}
</style>